import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js";
import "https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js";
import "./jquery.pagination.js";





function list() {
    //建立ajax请求数据
    $.ajax({
        url: "http://10.31.155.17/wanmeishijie/src/php/list.php",
        dataType: "json",
    }).done(function (data) {
        // console.log(data);
        // console.log(data.pagecontent);
        let arrData = data.pagecontent;
        let str = '';
        $.each(arrData, function (index, value) {
            str += `
            <li>
                <a href="detail.html?sid=${value.sid}">
                <img data-original="${value.url}" class="lazy"/>
                <p>${value.title}</p>
                <span>¥${value.price}</span>
                </a>
            </li>
            `;
        })
        $('.list ul').html(str);

        $('.lazy').lazyload({ effect: "fadeIn" });
        
        $('.page').pagination({
            pageCount: data.pagesize,
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            callback: function (api) {
                console.log(api.getCurrent());
                $.ajax({
                    url: "http://10.31.155.17/wanmeishijie/src/php/list.php",
                    data: {
                        page: api.getCurrent
                    },
                    dataType: "json",
                }).done(function (data) {
                    let arrData = data.pagecontent;
                    let str = '';
                    $.each(arrData, function (index, value) {
                        str += `
                        <li>
                            <a href="detail.html?sid=${value.sid}">
                            <img src="${value.url}" />
                            <p>${value.title}</p>
                            <span>¥${value.price}</span>
                            </a>
                        </li>
                        `;
                    })
                    $('.list ul').html(str);
                });
            }
        });
    });
}

export {
    list
}